﻿<h3 class="important-tittle">Themes</h3>

<p>
    You can set a default style for any chart in your application, you must select 
    colors, size and weight, according to your needs.
</p>

<h3>Colors</h3>

<p>
    This set of colors will be the default used in your series, when the number of series is greater than the number of colors
    in the theme, then the colors will repeat.
</p>

<p>
    <ol>
        <li><b>Material</b>, based on <a href="https://material.google.com/style/color.html">material design</a> from Google</li>
        <li><b>Metro</b>, based on MoedernUi design </li>
        <li><b>Blue</b>, a scale of blues</li>
        <li><b>White</b>, a scale of light colors</li>
        <li><b>Black</b>, a scale of dark colors</li>
    </ol>
</p>

<h3>Size</h3>

<p>
    The size determines the <i class="text-muted">FontSize</i> of <i class="text-muted">Axes</i> and <i class="text-muted">Series.DataLabels</i>,
    it also sets the default size of <i class="text-muted">Series.PointGeometrySize</i>, options are small (s), medium (m) and large (l).
</p>

<h3>Weight</h3>

<p>
    The weight defines the <i class="text-muted">Axis.Separator</i> stroke thickness and stroke dash array, it also defines the default
    <i class="text-muted">Series.StrokeThickness</i> property, options are light, normal and bold.
</p>

<h3>Example</h3>

<p>
    In your solution explorer open App.xaml and add a <i class="text-muted">ResourceDictionary</i> to your application resources,
    in this dictionary select the a color set, size and weight as shown in the code bellow, in this case we are using material design colors,
    medium size and normal weight
</p>


<pre class="prettyprint">&lt;Application x:Class="Wpf.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  StartupUri="MainWindow.xaml">
    &lt;Application.Resources>
        &lt;ResourceDictionary>
            &lt;ResourceDictionary.MergedDictionaries>
               
                &lt;!--Select colors set, options are material, metro, blue, white and black-->
                
                &lt;!--Material design colors-->&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Colors/material.xaml" />
                &lt;!--Metro colors-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Colors/metro.xaml" />-->
                &lt;!--Blue gradient-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Colors/blue.xaml" />-->
                &lt;!--white gradient-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Colors/white.xaml" />-->
                &lt;!--black gradient-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Colors/black.xaml" />-->
                
                &lt;!--Select size, options are small, medium and large-->
                
                &lt;!--small-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Size/s.xaml" />-->
                &lt;!--medium-->&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Size/m.xaml" />
                &lt;!--large-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Size/l.xaml" />-->
                
                &lt;!--Select weight, options are light, normal and bold-->
                &lt;!--light-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Weight/light.xaml" />-->
                &lt;!--normal-->&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Weight/normal.xaml" />
                &lt;!--bold-->&lt;!--&lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/Weight/bold.xaml" />-->
                
                &lt;!--Also add the base theme, this is required always-->
                &lt;ResourceDictionary Source="pack://application:,,,/LiveCharts.Wpf;component/Themes/base.xaml" />

                
            &lt;/ResourceDictionary.MergedDictionaries>
        &lt;/ResourceDictionary>
    &lt;/Application.Resources>
&lt;/Application></pre>

<h3>Custom Style</h3>

<p>
    You can also write your own theme, here is an example of a basic skeleton:
</p>

<pre class="prettyprint">&lt;Application x:Class="Wpf.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:lvc="clr-namespace:LiveCharts.Wpf"
  xmlns:system="clr-namespace:System;assembly=mscorlib"
  StartupUri="MainWindow.xaml">
    &lt;Application.Resources>
        &lt;ResourceDictionary>
            &lt;ResourceDictionary.MergedDictionaries>
               
                &lt;lvc:ColorsCollection x:Key="ColorsCollection">
                    &lt;Color A="255" R="33" G="149" B="242" />
                    &lt;Color A="255" R="243" G="67" B="54" />
                    &lt;Color A="255" R="254" G="192" B="7" />
                    &lt;Color A="255" R="96" G="125" B="138" />
                    &lt;Color A="255" R="232" G="30" B="99" />
                    &lt;Color A="255" R="76" G="174" B="80" />
                    &lt;Color A="255" R="63" G="81" B="180" />
                    &lt;Color A="255" R="204" G="219" B="57" />
                &lt;/lvc:ColorsCollection>

                &lt;system:Double x:Key="Size">12&lt;/system:Double>

                &lt;system:Double x:Key="SeparatorStrokeThickness">1.8&lt;/system:Double>
                &lt;DoubleCollection x:Key="SeparatorStrokeDashArray">3&lt;/DoubleCollection>
                &lt;system:Double x:Key="SeriesStrokeThickness">3.0&lt;/system:Double>

                &lt;Style TargetType="lvc:CartesianChart">
                    &lt;Setter Property="AnimationsSpeed" Value="0:0:0.420">&lt;/Setter>
                    &lt;Setter Property="SeriesColors" Value="{StaticResource ColorsCollection}"/>
                &lt;/Style>

                &lt;Style TargetType="lvc:Axis">
                    &lt;Setter Property="FontSize" Value="{StaticResource Size}">&lt;/Setter>
                    &lt;Setter Property="FontFamily" Value="Calibri">&lt;/Setter>
                    &lt;Setter Property="Foreground" Value="#99303030">&lt;/Setter>
                &lt;/Style>

                &lt;Style TargetType="lvc:Separator">
                    &lt;Setter Property="StrokeThickness" Value="{StaticResource SeparatorStrokeThickness}">&lt;/Setter>
                    &lt;Setter Property="StrokeDashArray" Value="{StaticResource SeparatorStrokeDashArray}">&lt;/Setter>
                    &lt;Setter Property="Stroke" Value="#1A303030">&lt;/Setter>
                    &lt;Style.Triggers>
                        &lt;Trigger Property="AxisOrientation" Value="X">
                            &lt;Setter Property="IsEnabled" Value="False">&lt;/Setter>
                        &lt;/Trigger>
                    &lt;/Style.Triggers>
                &lt;/Style>

                &lt;Style TargetType="lvc:Series" x:Key="SeriesStyle">
                    &lt;Setter Property="FontFamily" Value="Calibri">&lt;/Setter>
                    &lt;Setter Property="FontSize" Value="{StaticResource Size}">&lt;/Setter>
                    &lt;Setter Property="StrokeThickness" Value="{StaticResource SeriesStrokeThickness}">&lt;/Setter>
                &lt;/Style>

                &lt;Style TargetType="lvc:CandleSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:ColumnSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:HeatSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:LineSeries" BasedOn="{StaticResource SeriesStyle}">
                    &lt;Setter Property="PointGeometrySize" Value="{StaticResource Size}">&lt;/Setter>
                &lt;/Style>
                &lt;Style TargetType="lvc:StepLineSeries" BasedOn="{StaticResource SeriesStyle}">
                    &lt;Setter Property="PointGeometrySize" Value="{StaticResource Size}">&lt;/Setter>
                &lt;/Style>
                &lt;Style TargetType="lvc:VerticalLineSeries" BasedOn="{StaticResource SeriesStyle}">
                    &lt;Setter Property="PointGeometrySize" Value="{StaticResource Size}">&lt;/Setter>
                &lt;/Style>
                &lt;Style TargetType="lvc:OhlcSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:RowSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:ScatterSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:StackedAreaSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:StackedColumnSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:StackedRowSeries" BasedOn="{StaticResource SeriesStyle}"/>
                &lt;Style TargetType="lvc:VerticalStackedAreaSeries" BasedOn="{StaticResource SeriesStyle}"/>
                
            &lt;/ResourceDictionary.MergedDictionaries>
        &lt;/ResourceDictionary>
    &lt;/Application.Resources>
&lt;/Application>

</pre>